<template>
  <el-scrollbar height="650px">
  <div style="padding: 0px 20px">
    <div>
      基本信息
      <el-divider />
    </div>
    <div style="display: flex;justify-content: center;width: 100%;height: 100%">
      <el-form :inline="true">
        <el-form-item label-width="80px" label="用户昵称">
          <el-input v-model="souform.name" disabled/>
        </el-form-item>
        <el-form-item label-width="80px" label="用户账号">
          <el-input v-model="souform.no" disabled/>
        </el-form-item>
      </el-form>
    </div>
    <div>
      角色信息
      <el-divider />
    </div>
    <el-table
        :data="roleTableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :header-cell-style="{background:'#F5F7FA'}"
        ref="multip"
    >
<!--      <el-table-column class="el-table_1_column_2 is-center el-table-column&#45;&#45;selection el-table__cell" align="center">-->
<!--        <el-checkbox></el-checkbox>-->
<!--      </el-table-column>-->
      <el-table-column align="center" type="selection">
      </el-table-column>
      <el-table-column align="center" label="角色id">
        <template #default="scope">{{ scope.row.roleId }}</template>
      </el-table-column>
      <el-table-column align="center" property="roleName" label="角色名称" width="200" />
      <el-table-column align="center" property="roleCore" label="角色字符" show-overflow-tooltip/>

    </el-table>
    <el-row justify="center">
      <el-col>
        <el-pagination
            v-model:currentPage="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[5,10, 20, 30, 40]"
            small="small"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
            @size-change="sizeChange"
            @current-change="currentChange"/>
      </el-col>
    </el-row>
    <di style="display: flex;justify-content: center;margin-top: 30px">
      <el-button @click="submit()" type="primary">确定</el-button>
      <el-button @click="back()">返回</el-button>
    </di>
  </div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
//搜索表单
import {nextTick, onBeforeMount, reactive, watch} from "vue";
import {ref} from "@vue/reactivity";
import {useRoute, useRouter} from "vue-router";
import axios from "axios";
import {ElMessage} from "element-plus";

interface User {
  roleId: string
  roleName: string
  roleCore: string
}
const multipleSelection = ref<User[]>([])
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val

}
//提交按钮
const submit=()=>{
  let list=[];
  list.push(souform.id)
  for (let i = 0; i < multipleSelection.value.length; i++) {
    list.push(multipleSelection.value[i].roleId)
  }
  axios.post("adminOa/user/addUserRole",list).then((res)=>{
      ElMessage({
        message: '操作成功！',
        type: 'success',
      })
  })
}
//路由
const router=useRouter();
const route=useRoute()
//返回按钮
const back=()=>{
  router.push("system/user")
}
//基本信息
const souform = reactive({
  name: '',
  no: '',
  id:''
})
//table
//table角色表格
const tableData = ref([])
//分页
const pageNo =ref();
const pageSize=ref();
//分页方法
const sizeChange = (size) => {
  pageSize.value = size;
  //getData(d.pageNo);
}
const currentChange = (pageNo) => {
  //getData(pageNo);
}
const multip = ref(null);
let roleTableData=ref([])
const next=()=>{
  nextTick((data,tt,ww)=>{
    for (let i = 0; i < roleTableData.value.length; i++) {
      if(roleTableData.value[i].roleState==3){
        multip.value.toggleRowSelection(roleTableData.value[i])
      }
    }
  })
}
onBeforeMount(function (){
  souform.name=history.state.userName
  souform.no=history.state.userNo
  souform.id=history.state.userId
  axios.post("adminOa/user/selectByUserNo/"+souform.no).then((res)=>{
    tableData.value=res.data.data
    // tableData.value=res.data.data.sysUserRole.sysRole
  })
  axios.post("adminOa/role/select").then((res)=>{
    roleTableData.value=res.data.data
    for (let i = 0; i < roleTableData.value.length; i++) {
      for (let j = 0; j < tableData.value.length; j++) {
        if(roleTableData.value[i].roleId==tableData.value[j].roleId){
          roleTableData.value[i].roleState=3
        }
      }
    }
    console.log(roleTableData.value)
    next();
  })
})
</script>

<style>
.el-divider{
  margin-top: 10px;
}
.el-form-item__label{
  width: 100px;
  color: black;
}
</style>